<!--
 * @Author: your name
 * @Date: 2021-04-11 14:42:02
 * @LastEditTime: 2021-04-21 17:00:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /dvr-ui/src/components/card.vue
-->
<template>
  <el-row>
    <el-col class="item-wrapper"
            v-for="(item,index) in fileList"
            :key="index"
            :offset="1">
      <el-card :body-style="{ padding: '0px' }"
               shadow="hover">
        <img :src="showImg(item)"
             class="image">
        <div style="padding: 7px;">
          <span>{{item.vname}}</span>
          <div class="bottom clearfix">
            <el-button type="text"
                       class="button"
                       @click="routerTovOperate(item)">当前视频相似视频</el-button>
            <el-button type="text"
                       class="button"
                       @click="videoDownload(item)">下载当前视频</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <!-- <el-col class="item-wrapper"
            v-for="index in 3"
            :key="index+3"
            :offset="index > 0 ? 2 : 0">
      <el-card :body-style="{ padding: '0px' }"
               shadow="hover">
        <img src="http://localhost:8000/media/page/3.png"
             class="image">
        <div style="padding: 7px;">
          <span>233333333</span>
          <div class="bottom clearfix">
            <time class="time">{{ currentDate}}</time>
            <el-button type="text"
                       class="button">观看视频</el-button>
          </div>
        </div>
      </el-card>
    </el-col> -->
  </el-row>
</template>
<script>

export default ({
  props: {
    fileList: {
      default: function () {
        return []
      },
      type: Array
    }
  },
  data () {
    return {
      currentDate: new Date(),
    }
  },
  methods: {
    createCards (rJson) {
      console.log(rJson)
    },
    showImg (item) {
      console.log(item)
      if (item.fileImag === null) {
        return 'http://localhost:8000/media/404.png'
      } else {
        return 'http://localhost:8000/media/page/' + item.fileImag
      }

    },
    routerTovOperate (item) {
      this.$router.push({ path: '/sShow', query: { userId: item.id } });
    },
    videoDownload (item) {
      console.log(item)
      window.location.href = "http://localhost:8000/media/video/" + item.fileName
    }
  },
})

</script>

<style lang="css">
.item-wrapper {
  height: 25%;
  width: 20%;
  /* 10px为实际间隔的一半，此处主要用padding-left和padding-right，top和bottom为上下间距 */
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: center;
}

.image {
  width: 100%;
  height: 235px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>